<script setup lang="js">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { fetchMenuList, createMenu, updateMenu, getMenu } from '@/api/menu';
import {ElMessage, ElMessageBox} from "element-plus";

const route = useRoute();
const formRef = ref(null);
const menuForm = ref({
  title: '',
  parentId: 0,
  name: '',
  icon: '',
  hidden: 0,
  sort: 0
});
const selectMenuList = ref([]);
const rules = {
  title: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入前端名称', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
  ],
  icon: [
    { required: true, message: '请输入前端图标', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
  ]
}

onMounted(() => {
  if (route.query.id) {
    getMenu(route.query.id).then(res => {
      menuForm.value = res.data.data;
    })
  } else {
    menuForm.value = {
      title: '',
      parentId: 0,
      name: '',
      icon: '',
      hidden: 0,
      sort: 0
    };
  }
  getSelectMenuList();
})

const getSelectMenuList = () => {
  fetchMenuList(0, { pageSize: 100, pageNum: 1 }).then(res => {
    selectMenuList.value = res.data.data.list;
    selectMenuList.value.unshift({ id: 0, title: '顶级菜单' });
  })
}

const handleSave = async () => {
    formRef.value.validate((valid) => {
      if (valid) {
       ElMessageBox.confirm('确认提交保存？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         if (route.query.id) {
           updateMenu(route.query.id, menuForm.value).then((res) => {
             ElMessage.warning(res.data.message);
             ElMessage.success('保存成功');
             handleReset();
           })
         } else {
           createMenu(menuForm.value).then((res) => {
             ElMessage.warning(res.data.message);
             ElMessage.success('保存成功');
             handleReset();
           })
         }
       })
      }
  })
}

const handleReset = () => {
  menuForm.value = {
    title: '',
    parentId: 0,
    name: '',
    icon: '',
    hidden: 0,
    sort: 0
  };
}

</script>

<template>
  <div class="menu-detail">
    <el-card style="width: 500px;" shadow="never">
      <el-form label-width="100px" :model="menuForm" :rules="rules" ref="formRef">
        <el-form-item label="菜单名称：" prop="title">
          <el-input v-model="menuForm.title"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单：">
          <el-select v-model="menuForm.parentId"
                     placeholder="请选择菜单">
            <el-option
                v-for="item in selectMenuList"
                :key="item.id"
                :label="item.title"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="前端名称：" prop="name">
          <el-input v-model="menuForm.name"></el-input>
        </el-form-item>
        <el-form-item label="前端图标：" prop="icon">
          <el-input v-model="menuForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序：">
          <el-input-number v-model="menuForm.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示：">
          <el-radio-group v-model="menuForm.hidden">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">提交保存</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.menu-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}
</style>